<!DOCTYPE html>
<html lang="en">
<script src="/resources/js/jquery-1.7.1.min.js" type="application/javascript"></script>
<script src="/resources/js/jquery-ui-1.8.10.custom.min.js" type="text/css"></script>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul li{

            list-style: none;

        }
        .im-page{
            width: 441px;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 25px;
        }
        .im-page li{
            float: left;
            height: 25px;
            line-height: 25px;
            text-align: center;
        }
        .im-page li a{
            border-right: 1px solid #ff6500;
            padding: 5px 7px;
            color: #ff6500;
            margin-left: 20px;/*设置标签 a 之间的间隔*/
            text-decoration: none;/*去除页码数字下面的下划线*/
            width: 200px;
        }
        .sousuo{
            background-color: #4affff;
        }
        .zuo{
            width: 260px;
            height:260px;
        }

        .you{
            width: 260px;
            height:260px;
        }

         .im-table{

             width:99%;

         }
        .biao{
        width:100%;
        }
        .im-table{
            position: absolute;
            left: 0px;
            top: 250px;
        }
        .im-page{
            position: absolute;
            left: 35%;
            top: 650px;
        }
        .zuo{
            position: absolute;
            left: 25%;
        }
        .you {
            position: absolute;
            left: 55%;

        }
        .hao{
            position: absolute;
            left: 200px;
            top: 10px;
        }


        /* .zuo span{
             position: absolute;
             left: 200px;
         }*/

        table{border-collapse:collapse;
            background-color: rgba(229, 255, 151, 0.69)
        }
        } /*合并间距*/
        table,table th,table td{border:1px solid #ddd} /*表格带线框,6像素的间距*/
        table th,table td{padding:2px} /*单元格6像素的间距*/
        table th{background-color:#AAAAFF} /*表头带背景色*/
        table tr:nth-child(even){background: #f2d898;color:#000}
        table td:nth-child(odd){color:#c00}




        /*弹窗*/


        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=88);
        }
        .white_content p{
            position: absolute;
            left: 13%;
            top: 25%;
        }
        .white_tian{
            position: absolute;
            background: rgba(167, 210, 196, 0.8);
            top: 20%;
            left: 20%;
            width: 50%;
            height: 40%;
            padding: 20px;
            border-radius: 30px;
            border: 3px solid #ccfff1;
            z-index:1002;
            overflow: auto;
        }
        .white_you{
            position: absolute;
            top: 30px;
            left: 50%;

        }
        .white {
            position: absolute;
            background: rgba(167, 210, 196, 0.8);
            top: 20%;
            left: 20%;
            width: 50%;
            height: 40%;
            padding: 20px;
            border-radius: 30px;
            border: 3px solid #ccfff1;
            z-index:1002;
            overflow: auto;
        }
        .white_conten_you{
            position: absolute;
            top: 30px;
            left: 50%;

        }
        .white_content {
            display: none;
            position: absolute;
            background: rgba(167, 210, 196, 0.8);
            top: 5%;
            left: 20%;
            width: 55%;
            height: 55%;
            padding: 20px;
            border-radius: 30px;
            border: 3px solid #ccfff1;
            z-index:1002;
            overflow: auto;
        }
        .custom-btn {
            width: 130px;
            height: 40px;
            color: #e0fffa;
            border-radius: 5px;
            padding: 10px 25px;
            font-family: 'Lato', sans-serif;
            font-weight: 500;
            background: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            display: inline-block;
            box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,1),
            7px 7px 20px 0px rgba(0,0,0,.1),
            4px 4px 5px 0px rgba(0,0,0,.1);
            outline: none;
        }
        .btn-16 {
            border: none;
            color: #000;
        }
        .btn-16:after {
            position: absolute;
            content: "";
            width: 0;
            height: 100%;
            top: 0;
            left: 0;
            direction: rtl;
            z-index: -1;
            box-shadow:
                    -7px -7px 20px 0px #fff9,
                    -4px -4px 5px 0px #fff9,
                    7px 7px 20px 0px #0002,
                    4px 4px 5px 0px #0001;
            transition: all 0.3s ease;
        }
        .btn-16:hover {
            color: #000;
        }

        .btn-16:hover:after {
            left: auto;
            right: 0;
            width: 100%;
        }
        .btn-16:active {
            top: 2px;
        }
        .anniu{

            position: absolute;
            left: 35%;
            top: 200px;
        }
        .sananniu{
            position: absolute;

            top: 210px;
        }
      /*  .sananniu input{
            background-color: #18baff;
            height: 30px;
            top: 210px;
        }*/
        body{
            background-color: #fff0e7;
        }
        .aa{
            position: absolute;
            top: 88%;
            left: 43%;
        }
    </style>

</head>
<body>
<div class="sousuo">
    <form class="form-b" action="" id="form1">
        <div class="you">
            <div class="search bar6">
                <input type="text" placeholder="通用名" style="width: 220px" name="commonName">
            </div>
            <div>
                <input type="text" placeholder="请输入规格" style="width: 220px"  name="size" />
            </div>

            <div>
                <input type="text" placeholder="请输入转换系数" style="width: 220px" name="factor" />
            </div>
            <div>
                交易状态：<select name="transaction" class="province" id="leibie" onclick="changeCity()" style="width: 145px; height: 25px" >
                <option value="">请选择</option>
                <option value="1">正常</option>
                <option value="2">暂停交易</option>
            </select>
            </div>
        </div>
        <div class="zuo">

            <div>
                <input type="text" placeholder="请输入药品流水号" style="width: 220px"  name="serialNumber" />
            </div>

            <div>
                <input type="text" placeholder="请输入剂型" style="width: 220px"  name="dosageForm" />
            </div>

            <div>
                <input type="text" placeholder="请输入单位" style="width: 220px"  name="unit" />
            </div>
            <div>
                药品类别：<select name="drugCategory" class="province" id="leibie" onclick="changeCity()" style="width: 145px; height: 25px" >
                <option value="">请选择</option>
                <option value="1">抗生素类药品</option>
                <option value="2">心脑血管用药</option>
                <option value="3">消化系统用药 </option>
                <option value="4">呼吸系统用药</option>
                <option value="5">泌尿系统用药</option>
                <option value="6">血液系统用药</option>
                <option value="7">五官科用药</option>
                <option value="8">抗风湿类药品</option>
                <option value="9">注射剂类药品</option>
                <option value="10">糖尿病用药</option>
                <option value="11">激素类药品</option>
                <option value="12">皮肤科用药</option>
                <option value="13">妇科用药</option>
                <option value="14">抗肿瘤用药</option>
                <option value="15">抗精神病药品</option>
                <option value="16">清热解毒药品</option>
                <option value="17">受体激动\阻断药和抗过敏药</option>
                <option value="18">滋补类药品</option>
                <option value="19">维生素、矿物质药品</option>



            </select>
            </div>
        </div>



        <div class="anniu">
            <input type="button" class="custom-btn btn-16" onclick="caigoucha(1)" value="查询" />
            &nbsp;&nbsp;&nbsp;

            <input type="button" class="custom-btn btn-16" onclick="gxdaochu()" value="导出" />
        </div>
    </form>
</div>
<div class="sananniu">
    <input type="button" class="custom-btn btn-16" onclick="tiantanchuang()" value="添加" />
    <input type="button" class="custom-btn btn-16" onclick = "document.getElementById('light').style.display='block'" value="导入" >
</div>
<div id="light" class="white_content">
    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        下载导入模板文件<a href="javascript:void(0);" onclick="moban()">点击下载药品品目导入模板</a><br>
        提示：在下载后在模板文件中录入发货药品品目信息，在下边的“选择文件”中选择要导入的文件<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="file" name="file1" id="file1" class="file-info-b  file-info-b-1" accept=".xlsx"><br><br><br><br>


        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" onclick="daoru()" value="导入" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" value="关闭" />
    </p>
    　　　</div>
<div id="fade" class="black_overlay"></div>
<div class="im-table">
    <table class="biao">
        <thead>
        <tr style="height: 60px;width: 500px">
            <th class="w1">序号</th>
            <th class="w2"><input class="checkMax" onclick="checkMax()" type="checkbox" value="">
                全选</th>
            <th class="w8">流水号</th>
            <th class="w9">通用名</th>
            <th class="w11">剂型</th>
            <th class="w12">规格</th>
            <th class="w13">单位</th>
            <th class="w14">转换系数</th>
            <th class="w14">药品类别</th>
            <th class="w21">采购状态</th>
            <th class="w14">详细</th>
            <th class="w14">修改</th>
            <th class="w21">删除</th>

        </tr>
        </thead>
        <tbody id="tbody">
        <tr >

        </tr>
        </tbody>
    </table>
</div>
<div class="im-page">
    <ul id="pages">
        <li class="im-indexpage"><a href="">首页</a></li>
        <li class="im-nextpage"><a href="">上一页</a></li>
        <li class="im-nextpage"><a href="">下一页</a></li>
        <li class="im-indexpage"><a href="">尾页</a></li>
    </ul>
</div>

<div id="ligh" class="white" style="display: none">
    <form class="form-b1" action="" id="form">
        <div class="white_conten_zuo">
            <div>
                流水号:<input type="text" placeholder="" style="width: 220px"  name="xiuliusui" disabled="true" />
            </div>
            <br>
            <div>
                通用名:<input type="text" style="width: 220px"  name="xiutongyong" />
            </div>
            <br>
            <div>
                规格:<input type="text" style="width: 220px"  name="xiuguige" />
            </div>
            <br>
            <div>
                转换系数:<input type="text" style="width: 220px" name="xiuxisu" />
            </div>
        </div>
        <div class="white_conten_you">
            <div>
                剂型：<input type="text" style="width: 220px"  name="xiujixing" />
            </div>
            <br>
            <div>
                单位：<input type="text" style="width: 220px"  name="xiudanWei" />
            </div>
            <div>
                交易状态：<select name="xiutransaction" class="province" id="leibie" onclick="changeCity()" style="width: 145px; height: 25px" >
                <option value="">请选择</option>
                <option value="1">正常</option>
                <option value="2">暂停交易</option>
            </select>
            </div>
            <br>
            <div>
                药品类别：<select name="xiuleibie" class="province" id="leibie" style="width: 145px; height: 25px" >
                <option value="">请选择</option>
                <option value="1">抗生素类药品</option>
                <option value="2">心脑血管用药</option>
                <option value="3">消化系统用药 </option>
                <option value="4">呼吸系统用药</option>
                <option value="5">泌尿系统用药</option>
                <option value="6">血液系统用药</option>
                <option value="7">五官科用药</option>
                <option value="8">抗风湿类药品</option>
                <option value="9">注射剂类药品</option>
                <option value="10">糖尿病用药</option>
                <option value="11">激素类药品</option>
                <option value="12">皮肤科用药</option>
                <option value="13">妇科用药</option>
                <option value="14">抗肿瘤用药</option>
                <option value="15">抗精神病药品</option>
                <option value="16">清热解毒药品</option>
                <option value="17">受体激动\阻断药和抗过敏药</option>
                <option value="18">滋补类药品</option>
                <option value="19">维生素、矿物质药品</option>
            </select>
            </div>
        </div>
    </form>
    <div class="aa">
        <input type="button" onclick="gai()" value="提交" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onclick="document.getElementById('ligh').style.display='none';document.getElementById('fade').style.display='none'" value="关闭" />
    </div>
    　　　</div>
<div id="lighe" class="white_tian" style="display: none">
    <form class="form-b2" action="" id="form2">
    <div class="white_zuo">
        <div>
            流水号:<input type="text" placeholder="" style="width: 220px"  name="serialNumber"/>
        </div>
        <br>
        <div>
            通用名:<input type="text" style="width: 220px"  name="commonName" />
        </div>
        <br>
        <div>
            规格:<input type="text" style="width: 220px"  name="size" />
        </div>
        <br>
        <div>
            转换系数:<input type="text" style="width: 220px" name=" factor" />
        </div>
    </div>
    <div class="white_you">
        <div>
            剂型：<input type="text" style="width: 220px"  name="dosageForm" />
        </div>
        <br>
        <div>
            单位：<input type="text" style="width: 220px"  name="unit" />
        </div>
        <br>
        <div>
            交易状态：<select name="transaction" class="province" id="leibie" style="width: 145px; height: 25px" >
            <option value="">请选择</option>
            <option value="1">正常</option>
            <option value="2">暂停交易</option>
        </select>
        </div>
        <br>
        <div>
            药品类别：<select name="drugCategory" class="province" id="leibie" style="width: 145px; height: 25px" >
            <option value="">请选择</option>
            <option value="1">抗生素类药品</option>
            <option value="2">心脑血管用药</option>
            <option value="3">消化系统用药 </option>
            <option value="4">呼吸系统用药</option>
            <option value="5">泌尿系统用药</option>
            <option value="6">血液系统用药</option>
            <option value="7">五官科用药</option>
            <option value="8">抗风湿类药品</option>
            <option value="9">注射剂类药品</option>
            <option value="10">糖尿病用药</option>
            <option value="11">激素类药品</option>
            <option value="12">皮肤科用药</option>
            <option value="13">妇科用药</option>
            <option value="14">抗肿瘤用药</option>
            <option value="15">抗精神病药品</option>
            <option value="16">清热解毒药品</option>
            <option value="17">受体激动\阻断药和抗过敏药</option>
            <option value="18">滋补类药品</option>
            <option value="19">维生素、矿物质药品</option>
        </select>
        </div>
    </div>
    </form>
    <div class="aa">
        <input type="button" onclick="insertdrug()" value="添加" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onclick="document.getElementById('lighe').style.display='none';document.getElementById('fade').style.display='none'" value="关闭" />
    </div>
    　　　</div>

</body>
<script type="text/javascript">

    //导入发货
    function daoru() {
        var formdata=new FormData();
        $.each($("#file1")[0].files,function (index,item) {
            formdata.append("file",item);
        });
        console.log(formdata);
        $.ajax({
            url:"/provider/excelRead",
            data:formdata,
            type:"post",
            async:false,
            contentType:false,
            processData:false,
            success:function (data) {
                alert(data);
            }


        })
    }

    //确认发货
    function fahuo() {
        var idList=[];
        $.each($(".checkMin"),function (index,item) {
            if ($(item).prop("checked")==true){
                idList.push($(item).val());
            }
        });
        console.log(idList);

        $.ajax({
            url:"/provider/updata",
            data:{idList:idList},
            type:"post",
            async:false,
            traditional:true,
            success:function (data) {
                alert(data);
            }



        });
        caigoucha(1)
    }
    function moban(){
        location.href="/provider/drugmoban";
    }
    //导入
    function daoru() {
        var formdata=new FormData();
        $.each($("#file1")[0].files,function (index,item) {
            formdata.append("file",item);
        });
        console.log(formdata);
        $.ajax({
            url:"/provider/exeldrug",
            data:formdata,
            type:"post",
            async:false,
            contentType:false,
            processData:false,
            success:function (data) {
                alert(data);
            }


        })
    }
    //勾选导出
    function gxdaochu() {
        var idList=[];
        $.each($(".checkMin"),function (index,item) {
            if ($(item).prop("checked")==true){
                idList.push($(item).val());
            }
        });
        console.log(idList);
        location.href="/provider/drugidList?idList="+idList;
    }
    /*全选按钮*/
    function checkMax() {
        var check=$(".checkMax").prop("checked");
        $(".checkMin").prop('checked',check);
    }
    /*勾选按钮*/
    function checkMin() {
        var chec=true;
        $.each($(".checkMin"),function (index,item) {
            if($(item).prop("checked")==false){
                chec=false;
            }
        });
        $(".checkMax").prop('checked',chec);
    }
    //弹窗
    var xiuid=0;
    function tanchuang(id) {
        $.ajax({
            url:"/provider/weixiu",
            data:{"id":id},
            type:"post",
            async:false,
            traditional:true,
            success:function (data) {
                $("input[name='xiuliusui']").val(data[0].serialNumber);
                $("input[name='xiutongyong']").val(data[0].commonName);
                $("input[name='xiuguige']").val(data[0].dosageForm);
                $("input[name='xiuxisu']").val(data[0].factor);
                $("input[name='xiujixing']").val(data[0].dosageForm);
                $("input[name='xiudanWei']").val(data[0].unit);
                $("select[name='xiutransaction']").val(data[0].transaction);
                $("select[name='xiuleibie']").val(data[0].drugCategory);
            }
        });
        xiuid=id;
        document.getElementById('ligh').style.display='block'
    }
    function tiantanchuang() {

        document.getElementById('lighe').style.display='block'
    }

    $(function () {
        caigoucha(1);
    });
    //添加
    function insertdrug() {
        /*var form=document.getElementById("from2");*/
        /* var form2=document.getElementById("search_form");*/
        /*var formdata=new FormData(form);*/
        /*var form=$("#form2")[0];*/
        var formData=$("#form2").serialize();
        console.log(formData);
        $.ajax({
            url:"/provider/insertdrug",
            data:formData,
            dataType:"json",
            type:"post",
            success:function (data) {
                alert(data);
            }
        })
    }
    /*模糊查询*/
    function caigoucha(pageNum) {
        if(pageNum==0){
            pageNum=1;
        }
        var formData=$("#form1").serialize();
        formData+="&pageNum="+pageNum;
        console.log(formData);
        $.ajax({
            url:"/provider/Items",
            data:formData,
            dataType:"json",
            type:"post",
            success:function (data) {
                console.log(data);
                var tbody='';
                var list=data.list;
                console.log(list);
                $("#tbody").empty();
                for (var i=0;i<list.length;i++){
                    var smp=list[i];
                    /* for (b=0;b<smp.length;b++){
                         if(smp[b]==null && smp[b].equals("")){
                             smp[b]="";
                         }
                     }*/
                    var zt="";
                    if(smp.transaction==1){
                        zt="正常";
                    }else{
                        zt="暂停交易";
                    }
                    console.log(smp);


                    tbody+='<tr style="height: 60px;width: 100%">' +
                        '            <td class="w1">'+(i+1)+'</td>\n' +
                        '            <td class="w2"><input class="checkMin" onclick="checkMin()" value="'+smp.id+'" type="checkbox"></td>' +
                        '            <td class="w8">'+smp.serialNumber+'</td>' +
                        '            <td class="w9">'+smp.commonName+'</td>' +
                        '            <td class="w11">'+smp.dosageForm+'</td>' +
                        '            <td class="w12">'+smp.size+'</td>' +
                        '            <td class="w13">'+smp.unit+'</td>' +
                        '            <td class="w14">'+smp.factor+'</td>' +
                        '            <td class="w15">'+smp.category+'</td>' +
                        '            <td class="w16">'+zt+'</td>' +
                        '            <td class="w17"><button class="custom-btn btn-16"><a href="Particular.html?Sid='+smp.id+'">查看</a></button></td>'+
                        '            <td class="w18"><button class="custom-btn btn-16" onclick="tanchuang('+smp.id+')">修改</button></td>'+
                        '            <td class="w19"><button class="custom-btn btn-16" onclick="delectdrug('+smp.id+')">删除</button></td></tr>'
                }
                $("#tbody").append(tbody);
                $("#pages").empty();
                var pages=' <li class="im-indexpage"><a href="javaScript:caigoucha('+1+')">首页</a></li>\n' +
                    '        <li class="im-nextpage"><a href="javaScript:caigoucha('+data.prePage+')">上一页</a></li>\n' +
                    '        <li class="im-nextpage"><a href="javaScript:caigoucha('+data.nextPage+')">下一页</a></li>\n' +
                    '        <li class="im-indexpage"><a href="javaScript:caigoucha('+data.pages+')">尾页</a></li>';
                $("#pages").append(pages);
            }
        })
    }
    function gai() {
        var pojo={

            id:xiuid,
            commonName:$("input[name='xiutongyong']").val(),
            size:$("input[name='xiuguige']").val(),
            factor:$("input[name='xiuxisu']").val(),
            dosageForm:$("input[name='xiujixing']").val(),
            unit:$("input[name='xiudanWei']").val(),
            transaction:$("select[name='xiutransaction']").val(),
            drugCategory:$("select[name='xiuleibie']").val(),
        };

        console.log(pojo);
        $.ajax({
            url:"/provider/updateItems",
            data:{JsonPojo:JSON.stringify(pojo)},
            dataType:"json",
            type:"post",
            cache: false,
            success:function (data) {
                alert(data);
            }
        });
        alert("提交成功！")
    }
    function delectdrug(id) {
        $.ajax({
            url:"/provider/delectdrug",
            data:{id:id},
            type:"post",
            async:false,
            traditional:true,
            success:function (data) {
                alert(data);
            }
        });
        caigoucha(1);
    }

</script>
</html>